<!--电影详情页-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link type="text/css" href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script language="JavaScript">
        $(function () {
            get_areas_data();
            url = window.location.search;
            movie_id = url.substr(url.indexOf("=")+1);
            // alert(movie_id);
            get_movie_data(movie_id)
        });

        //ajax请求接口并显示地址数据
        function get_areas_data() {
            var url = "http://127.0.0.1:9000/api/v1/home/";
            $.get(url,function (result){
                if(result.status === 200){
                    area = result.data.area;
                    show_areas(area);
                    //热门城市单击选择
                    show_choice_hot_area();
                }
            })
        }

        //在链接栏上显示地址
        function show_areas(area) {
            hot_areas = area.hot_areas;
            normal_areas = area.normal_areas;
            $('#show_areas')
                .append(
                    $('<a>').addClass("btn dropdown-toggle").attr('role',"button").attr('data-toggle',"dropdown")
                        .append(
                            $('<span>').text("北京").addClass('has_choice_hot_area')
                        )
                        .append(
                            $('<span>').addClass("caret")
                        )
                )
                .append(
                    $('<ul>').addClass("dropdown-menu list-unstyled show_areas").css({width:'800px',height:' 400px',overflow:'hidden'})
                        .append(
                            $('<li>').addClass('hot_areas clearfix')
                                .append(
                                    $('<span>').text("热门城市").addClass("bg-primary")
                                )
                        )
                );

            for(let hot_area of hot_areas){
                $('.hot_areas')
                    .append(
                        $('<span>')
                            .append(
                                $('<a>').text(hot_area.short_name).css({marginLeft:'10px'}).addClass("hot_choice_area")
                            )
                    )
            };

            for (let normal_area of normal_areas){
                $('.show_areas').append(
                    $('<li>')
                        .append(
                            $('<span>').text(normal_area.first).css({color : 'white',background: 'red'})
                        )
                );
                normal_list = normal_area.normal_list;
                for (let normal of normal_list){
                    $(".show_areas:last-child")
                        .append(
                            $('<span>')
                                .append(
                                    $('<a>').text(normal.short_name).css({marginLeft:'10px'})
                                )
                        )
                }
            }
        }

        //电影热门城市切换
        function show_choice_hot_area() {
            $('.hot_choice_area').each(function () {
                $(this).click(function () {
                    let text = $(this).text();
                    $('.has_choice_hot_area').text(text);
                })
            });

        }

        //获取电影数据并显示
        function get_movie_data(movie_id) {
            url = "http://127.0.0.1:9000/api/v1/search/?movie_id=" + movie_id;
            $.get(url,function (result) {
                if(result.status === 200){
                    movie = result.data.movie;
                    show_movie(movie);
                }
            })
        }

        //进行电影dom操作
        function show_movie(movie) {
            $('.show_movie')
                .append(
                    $('<h3>')
                        .append(
                            $('<span>').text(movie.show_name)
                        )
                        .append(
                            $('<span>').addClass("text-muted").text('('+movie.screening_model+')')
                        )
                )
                .append(
                    $('<div>')
                        .css({width:'100%' ,height: '1px', background: 'darkgray',marginBottom:'20px'})
                )
                .append(
                    $('<div>').addClass('pull-left')
                        .append(
                            $('<img>').attr('src','https://img.alicdn.com/bao/uploaded/' + movie.pic).css({height: '300px',width:'200px'})
                        )
                )
                .append(
                    $('<div>').addClass('pull-left').css({marginLeft:'30px'})
                        .append(
                            $('<ul>').addClass("list-inline")
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<h5>').css({fontWeight:'bolder'}).text("主演:")
                                        )
                                )
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<span>').text(movie.leading_role)
                                        )
                                )
                        )
                        .append(
                            $('<ul>').addClass("list-inline")
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<h5>').css({fontWeight:'bolder'}).text("导演:")
                                        )
                                )
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<span>').text(movie.director)
                                        )
                                )
                        )
                        .append(
                            $('<ul>').addClass("list-inline")
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<h5>').css({fontWeight:'bolder'}).text("类型:")
                                        )
                                )
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<span>').text(movie.type)
                                        )
                                )
                        )
                        .append(
                            $('<ul>').addClass("list-inline")
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<h5>').css({fontWeight:'bolder'}).text("制片国家\地区:")
                                        )
                                )
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<span>').text(movie.country)
                                        )
                                )
                        )
                )
                .append(
                    $('<div>').addClass("pull-right ").css({top:'0px'})
                        .append(
                            $('<ul>').addClass("list-inline")
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<h5>').css({fontWeight:'bolder'}).text("播放时长")
                                        )
                                )
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<h3>').text(movie.duration + "分钟")
                                        )
                                )
                        )
                        .append(
                            $('<ul>').addClass("list-inline")
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<h5>').css({fontWeight:'bolder'}).text("上映日期")
                                        )
                                )
                                .append(
                                    $('<li>')
                                        .append(
                                            $('<h3>').text(movie.open_day)
                                        )
                                )
                        )
                )

        }



    </script>
</head>


<body>

<nav class="navbar navbar-default " style="height:20px;">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">淘票票</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">电影 <span class="sr-only"></span></a></li>
                <li><a href="#">音乐</a></li>
                <li class="dropdown">
                    <a href="#" class="btn dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="glyphicon glyphicon-align-justify"></span></a>
                    <ul class="dropdown-menu ">
                        <li class="bg-primary" ><a href="#" >同城</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="bg-success"><a href="#">小组</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="bg-info"><a href="#">聊天</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="bg-warning"><a href="#">读书</a></li>

                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户详情<span class="caret"></span></a>
                    <ul class="dropdown-menu bg-danger">
                        <li><a href="#">用户名</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">我的收藏</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注册Vip会员</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->
</nav>

<!--链接栏-->
<div class="container-fluid">
    <div class="col-lg-12">
        <ul class="nav nav-tabs nav-justified" >
            <li role="presentation" class=" dropdown" id="show_areas"></li>
            <li role="presentation" ><a href="index.html" style="font-size: 30px">首页</a></li>
            <li role="presentation"><a href="movies_list.html" style="font-size: 30px">影片</a></li>
            <li role="presentation"><a href="cinemas_list.html" style="font-size: 30px">影院</a></li>
        </ul>
    </div>
</div>

<div style="width: 100%;opacity: 0.7;padding-bottom: 40px;background:#1fcfaa"  >
    <div class="container">
        <div class="col-lg-12 clearfix show_movie">

        </div>
    </div>
</div>

</body>
</html>